<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
    <title>Like-喜欢鲜花平台！让鲜花从农户到用户一步到位 </title>
		<meta name="keywords" content="喜欢婚礼,婚礼学堂,嘉田美合,婚礼图片,婚礼视频,婚礼VR,婚礼,婚庆" />
		<meta name="description" content="喜欢婚礼平台,以婚礼机构为切入点，以婚礼用花为切入口，整合线下婚礼资源,鲜花,婚礼用品,舞美,人员等" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
		<link rel="stylesheet" type="text/css" href="../../statics/css/cssinit.css" />
		<style type="text/css">
			.header {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				padding: 0 15px;
				box-sizing: border-box;
				background-color: #f5f5f5;
				box-shadow: inset 0px -1px 1px -1px #969696;
				position: fixed;
				z-index: 999;
				top: 0;
			}
			
			.header #backIcon {
				width: 46.5px;
			}
			
			.header .backIcon {
				width: 10px;
				height: 10px;
				/*border: 2px solid #d9b96e;*/
				border: 2px solid #969696;
				border-bottom: none;
				border-left: none;
				transform: rotate(-135deg);
				-ms-transform: rotate(-135deg);
				-moz-transform: rotate(-135deg);
				-webkit-transform: rotate(-135deg);
				-o-transform: rotate(-135deg);
			}
			
			.header .content {
				font-size: 18px;
				color: black;
			}
			
			.header .custom img {
				width: 17.5px;
				height: 17.5px;
				padding-right: 5px;
			}
			
			.main {
				width: 100%;
				text-align: center;
				position: fixed;
				z-index: 999;
				top: 50px;
			}
			
			.main .nav {
				height: 42px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background: #F5F5F5;
				width: 100%;
			}
			
			.main .line {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 2px;
				width: 100%;
				position: relative;
				top: -2px;
			}
			
			.main .line1,
			.main .line2 {
				height: 2px;
				width: 18px;
				background: #66BCD5;
			}
			
			.Detail {
				margin-top: 110px;
			}
			
			.Detail .template {
				margin: 15px;
				border: 1px solid #66BCD5;
				border-radius: 10px;
				overflow: hidden;
				position: relative;
			}
			
			.Detail .template .sanjiao {
				position: absolute;
				top: -25px;
				left: -25px;
				display: inline-block;
				width: 0;
				height: 0;
				border-width: 25px;
				overflow: hidden;
				border-color: #66BCD5 transparent transparent;
				border-style: solid dotted dotted;
				transform: rotate(135deg);
			}
			/*.Detail .example:after{
				content: "1";
				display: block;
				width: 20px;
				height: 20px;
				color: white;
				font-size: 5px;
				position: absolute;
				top: 5px;
				left: 5px;
				z-index: 999;
				transform: rotate(30deg);
			}*/
			
			.Detail .template .number {
				display: block;
				width: 20px;
				height: 20px;
				color: white;
				font-size: 10px;
				position: absolute;
				top: 5px;
				left: 5px;
				z-index: 999;
				transform: rotate(15deg);
				-ms-transform: rotate(15deg);
				-moz-transform: rotate(15deg);
				-webkit-transform: rotate(15deg);
				-o-transform: rotate(15deg);
			}
			
			.Detail .template ul {
				padding: 0 15px;
			}
			
			.Detail .template ul li {
				padding: 0 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 45px;
				border-bottom: 1px solid #D6D6D6;
			}
			
			.Detail .template ul li span:last-child {
				color: black;
			}
			 .noOrder {
				font-size: 15px;
				text-align: center;
			}
			
			 .noOrder img {
			 	display: block;
				margin: 194px auto 40px;
				width: 144px;
			}
		</style>
	</head>

	<body>
		<header class="header">
			<div id="backIcon">
				<div class="backIcon"></div>
			</div>
			<div class="content">注册用户</div>
			<div class="custom"><span><img src="../../statics/images/cityPartner/custom.png" alt="客服"/>客服</span></div>
		</header>
		<div class="main">
			<div class="nav">
				<div class="today">
					今日注册
				</div>
				<div class="month">
					本月注册
				</div>
			</div>
			<div class="line">
				<div class="line1"></div>
				<div class="line2" style="visibility:  hidden;"></div>
			</div>
		</div>
		<div class="Detail todayDetail"  style="display: none;">
		</div>
		<div class="Detail monthDetail"  style="display: none;">
		</div>
		<div class="noOrder" >
				<img src="../../statics/images/cityPartner/order/empty.png" />
				<span>当前没有注册数据哦~</span>
		</div>

	</body>
	<script id="template" class="clearfix" type="text/html">
		<div class="template">
			<div class="sanjiao"></div>
			<div class="number">{{id}}</div>
			<ul>
				<li><span>公司名称</span><span>{{name}}</span></li>
				<li><span>公司地址</span><span>{{address}}</span></li>
				<li><span>注册时间</span><span>{{time}}</span></li>
				<li><span>联系电话</span><span>{{phone}}</span></li>
				<li style="border-bottom: none;"><span>下单数量</span><span>{{orderNumber}}</span></li>
			</ul>
		</div>
	</script>
	<script src="../../statics/js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../statics/bowersrc/fastclick.js" type="application/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
		$(function() {
			new FastClick(document.body);
		})
	</script>

	<script type="text/javascript">
			$(".custom").on("click",function  () {
				window.location.href = "../../views/service.html";
		})
		$("#backIcon").on("click", function() {
			window.history.back(-1)
		})
		$(".today").on("click", function() {
			$(".line2").css("visibility", "hidden");
			$(".line1").css("visibility", "visible");
			$(".todayDetail").show();
			$(".monthDetail").hide();
		})
		$(".month").on("click", function() {
			$(".line1").css("visibility", "hidden");
			$(".line2").css("visibility", "visible");
			$(".todayDetail").hide()
			addData(data1,$(".monthDetail"))	
		})

		var data = {
			"sites": [{
					id: 1,
					name: "浙江传世有限公司",
					address: "浙江省杭州市滨江区江南大道521号",
					time: "2017-05-27",
					phone: "0571-88264251",
					orderNumber: "300单"
				},
				{
					id: 2,
					name: "浙江传世有限公司",
					address: "浙江省杭州市滨江区江南大道521号",
					time: "2017-05-27",
					phone: "0571-88264251",
					orderNumber: "100单"
				}
			]
		};
		var data1 = {
			"sites": [{
					id: 1,
					name: "浙江传世有限公司",
					address: "浙江省杭州市滨江区江南大道521号",
					time: "2017-05-27",
					phone: "0571-88264251",
					orderNumber: "300单"
				},
				{
					id: 2,
					name: "浙江传世有限公司",
					address: "浙江省杭州市滨江区江南大道521号",
					time: "2017-05-27",
					phone: "0571-88264251",
					orderNumber: "100单"
				},
				{
					id: 3,
					name: "浙江传世有限公司",
					address: "浙江省杭州市滨江区江南大道521号",
					time: "2017-05-27",
					phone: "0571-88264251",
					orderNumber: "300单"
				},
				{
					id: 4,
					name: "浙江传世有限公司",
					address: "浙江省杭州市滨江区江南大道521号",
					time: "2017-05-27",
					phone: "0571-88264251",
					orderNumber: "100单"
				},
				{
					id: 5,
					name: "浙江传世有限公司",
					address: "浙江省杭州市滨江区江南大道521号",
					time: "2017-05-27",
					phone: "0571-88264251",
					orderNumber: "300单"
				},
				{
					id: 6,
					name: "浙江传世有限公司",
					address: "浙江省杭州市滨江区江南大道521号",
					time: "2017-05-27",
					phone: "0571-88264251",
					orderNumber: "100单"
				}
			]
		};
		addData(data,$(".todayDetail"))
		function addData (data,htm) {
			var html = '';
		if (data.sites.length>0) {
				for(var i = 0; i < data.sites.length; i++) {
			var htmlm = $("#template").html();
			htmlm = htmlm.replace(/\{\{id\}\}/, data.sites[i].id);
			htmlm = htmlm.replace(/\{\{name\}\}/, data.sites[i].name);
			htmlm = htmlm.replace(/\{\{address\}\}/, data.sites[i].address);
			htmlm = htmlm.replace(/\{\{time\}\}/, data.sites[i].time);
			htmlm = htmlm.replace(/\{\{phone\}\}/, data.sites[i].phone);
			htmlm = htmlm.replace(/\{\{orderNumber\}\}/, data.sites[i].orderNumber);
			html += htmlm;
		}
					htm.html(html);
					$(".noOrder").hide()
					htm.show();			
		}else{
			$(".noOrder").show()
		}
		}
		
		
		
	

		//		data.sites.map((value, index) => {
		//			var htmlm = $("#template").html();
		//			htmlm = htmlm.replace(/\{\{id\}\}/, value.id);
		//			htmlm = htmlm.replace(/\{\{name\}\}/, value.name);
		//			htmlm = htmlm.replace(/\{\{address\}\}/, value.address);
		//			htmlm = htmlm.replace(/\{\{time\}\}/, value.time);
		//			htmlm = htmlm.replace(/\{\{phone\}\}/, value.phone);
		//			htmlm = htmlm.replace(/\{\{orderNumber\}\}/, value.orderNumber);
		//			html += htmlm;
		//		});
	

		//								var html = '';
		//								data.sites.map((value, index) => {
		//									var htmlm = `<div class="template">
		//										<div class="sanjiao"></div>
		//										<div class="number">${value.id}</div>
		//										<ul>
		//											<li><span>公司名称</span><span>${value.name}</span></li>
		//											<li><span>公司地址</span><span>${value.address}</span></li>
		//											<li><span>注册时间</span><span>${value.time}</span></li>
		//											<li><span>联系电话</span><span>${value.phone}</span></li>
		//											<li style="border-bottom: none;"><span>下单数量</span><span>${value.orderNumber}</span></li>
		//										</ul>
		//									</div>`;
		//									html += htmlm;
		//								});
		//								$(".todayDetail").html(html);
	</script>

</html>